<template>
  <div v-loading="loading" element-loading-text="加载中" class="detail">
    <div v-show="!showPicDetail">
      <div class="bread-box but20">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item class="btn-green" style=" color: #3DC094;" @click.native="handleBack">卫浴类样品配置</el-breadcrumb-item>
          <el-breadcrumb-item>详情</el-breadcrumb-item>
        </el-breadcrumb>
        <div>
          <el-button size="mini" @click="handleBack">返回</el-button>
        </div>
      </div>
      <c-list :column="3">
        <c-list-item label="产品配置单" :value="formData.configCode" />
        <c-list-item label="对应产品配置任务" :value="formData.configTaskCode" />
        <c-list-item label="任务来源" dict-type-code="PRODUCT_CONFIG_TASK_SOURCE" :value="formData.source" />
        <c-list-item label="产品配置进度" dict-type-code="PRO_CONFIG_SCHEDULE" :value="formData.schedule" />
        <c-list-item label="是否含自主配置" dict-type-code="BOOLEANS" :value="formData.isLibertyLoad" />
        <c-list-item label="自主配置申请单号" :value="formData.processInstanceNo" />
        <c-list-item label="门店建设项目号" :value="formData.constCode" />
        <c-list-item label="所属门店编码" :value="formData.shopCode" />
        <c-list-item label="所属门店名称" :value="formData.shopName" />
        <c-list-item label="所属客户编码" :value="formData.clientCode" />
        <c-list-item label="所属客户名称" :value="formData.clientName" />
        <c-list-item label="所属办事处" :value="formData.officeName" />
        <c-list-item label="产品配置人员" :value="formData.proConfiguratorName" />
        <c-list-item label="采购订单号" :value="formData.poCode" />
        <c-list-item label="采购订单状态" dict-type-code="PO_STATE" :value="formData.poState" />
        <c-list-item label="采购订单提报时间" :value="formData.orderCreateTime" />
        <c-list-item label="关联图纸总面积" :value="formData.picTotalArea" />
        <c-list-item label="创建人" :value="formData.createBy" />
        <c-list-item label="创建时间" :value="formData.createTime" />
        <c-list-item label="修改人" :value="formData.lastUpdateBy" />
        <c-list-item label="修改时间" :value="formData.lastUpdateTime" />
      </c-list>
      <c-section title="关联图纸信息">
        <c-table-box hide-func :data="formData.designPictureDtos" :table-config="picTableConfig" />
      </c-section>
      <c-section title="产品配置清单">
        <c-table-box hide-func :data="formData.configOutPicDtos ? formData.configOutPicDtos[0].configDetailDtos : []" :table-config="productTableConfig" />
      </c-section>
    </div>
    <detail v-if="showPicDetail" :shop-config-data="rowId" page-flag="shopConfig" :page-show.sync="showPicDetail" @goBack="backDetail" />
    <!-- <div class="btn-container">
      <el-button type="primary" @click="clickBack">返回</el-button>
    </div> -->
  </div>
</template>
<script>
// import RelevanceDrawing from '../components/relevanceDrawing'
import { getProConfigEditData } from '@/api/proConfig'
import { getDictByPatchType } from '@/api/dataDict'
import { getAreaData } from '../task/components/index'
import detail from '../../shopDrawing/management/detail.vue'
export default {
  name: 'PCFinishedDetail',
  components: {
    // RelevanceDrawing
    detail
  },
  props: {
    isAudit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      rowId: '',
      showPicDetail: false,
      loading: false,
      areaList: [],
      designRangeList: [],
      decorationTypeList: [],
      designSpaceList: [],
      designBizTypeList: [],
      formData: {},
      picTableConfig: {
        setting: [
          {
            prop: 'picTaskCode',
            label: '图纸编码',
            minWidth: 100,
            className: 'btn-green',
            isButton: true,
            clickFun: this.toPicDetail
          },
          {
            prop: 'picType',
            label: '图纸类型',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PIC_TYPE'
            },
            minWidth: 100
          },
          {
            prop: 'designRange',
            label: '设计范围',
            minWidth: 100,
            render: (creat, row) => {
              if (!row.designRange) {
                return
              }
              let list = []
              if (typeof (row.designRange) === 'string') {
                list = row.designRange.split(',')
              } else {
                list = row.designRange
              }
              const arr = []
              this.designRangeList.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'decorationType',
            label: '装修形式',
            minWidth: 100,
            render: (creat, row) => {
              if (!row.decorationType) {
                return
              }
              let list = []
              if (typeof (row.decorationType) === 'string') {
                list = row.decorationType.split(',')
              } else {
                list = row.decorationType
              }
              const arr = []
              this.decorationTypeList.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'designSpace',
            label: '设计区域',
            minWidth: 100,
            render: (creat, row) => {
              if (!row.designSpace) {
                return
              }
              let list = []
              if (typeof (row.designSpace) === 'string') {
                list = row.designSpace.split(',')
              } else {
                list = row.designSpace
              }
              const arr = []
              this.areaList.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'designBizType',
            label: '设计业务类型',
            minWidth: 140,
            render: (creat, row) => {
              if (!row.designBizType) {
                return
              }
              let list = []
              if (typeof (row.designBizType) === 'string') {
                list = row.designBizType.split(',')
              } else {
                list = row.designBizType
              }
              const arr = []
              this.designBizTypeList.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'picTotalArea',
            label: '设计总面积',
            minWidth: 120
          },
          // {
          //   prop: 'finishedProductAreaSummary',
          //   label: '成品业务面积汇总',
          //   minWidth: 100
          // },
          {
            prop: 'softwareSumArea',
            label: '软体区面积',
            minWidth: 120
          },
          {
            prop: 'suiteSumArea',
            label: '套房区面积',
            minWidth: 120
          },
          {
            prop: 'haveEAndC',
            label: '是否含成融定',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'BOOLEANS'
            },
            minWidth: 140
          },
          {
            prop: 'eandCArea',
            label: '成融定面积',
            minWidth: 120
          },
          {
            prop: 'newBusinessAreaSummary',
            label: '新业务面积汇总',
            minWidth: 100
          },
          {
            prop: 'expectEndTime',
            label: '预计设计完成时间',
            minWidth: 140
          },
          {
            prop: 'designUnitName',
            label: '设计单位',
            minWidth: 100
          },
          {
            prop: 'designerName',
            label: '设计师',
            minWidth: 100
          },
          {
            prop: 'schedule',
            label: '图纸进度',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PIC_DESIGN_SCHEDULE'
            },
            minWidth: 100
          },
          {
            prop: 'state',
            label: '图纸状态',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PIC_DESIGN_STATE'
            },
            minWidth: 100
          }
        ]
      },
      productTableConfig: {
        setting: [
          {
            prop: 'productCode',
            label: '产品编码',
            minWidth: 100
          },
          {
            prop: 'productDesc',
            label: '产品描述',
            minWidth: 100
          },
          {
            prop: 'modelName',
            label: '型号',
            minWidth: 100
          },
          {
            prop: 'seriesName',
            label: '系列',
            minWidth: 100
          },
          {
            prop: 'categoryName',
            label: '所属品类',
            minWidth: 100
          },
          {
            prop: 'productNumber',
            label: '数量',
            minWidth: 80
          },
          {
            prop: 'productState', // lifePeriod产品生命周期
            label: '产品状态',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'order-center',
              dictTypeCode: 'PRODUCT_STATE'
            },
            minWidth: 100
          },
          {
            prop: 'pcontrolState',
            label: '采购控制状态',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'order-center',
              dictTypeCode: 'CAN_BE_PURCHASE'
            },
            minWidth: 130
          },
          {
            prop: 'poRowState',
            label: '采购订单行状态',
            minWidth: 130,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PUR_ORDER_STATE_ITEM'
            }
          },
          {
            prop: 'placeOrderType',
            label: '下单类型',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PLACE_ORDER_TYPE'
            },
            minWidth: 100
          },
          {
            prop: 'placeOrderDesc',
            label: '下单说明',
            minWidth: 100
          },
          {
            prop: 'dataSource',
            label: '数据来源',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'SHOP_CONSTRUCT_SOURCE'
            },
            minWidth: 100
          },
          {
            prop: 'enable',
            label: '启用状态',
            render: (creat, row) => {
              if (row.enable) {
                return <span>启用</span>
              } else {
                return <span>停用</span>
              }
            },
            minWidth: 100
          }
        ]
      }
    }
  },
  async created() {
    this.loading = true
    await this.getDictByTypeCode(['DECORATION_RANGE', 'DECORATION_FORM', 'BELONG_REGION', 'BIZ_TYPE']).then(res => {
      this.designRangeList = res.DECORATION_RANGE // 设计范围
      this.decorationTypeList = res.DECORATION_FORM // 装修形式
      this.designSpaceList = res.BELONG_REGION // 设计区域
      this.designBizTypeList = res.BIZ_TYPE // 设计业务类型
    })
    this.areaList = await getAreaData()
    getProConfigEditData(this.$route.params.id).then(res => {
      if (res.success && res.data) {
        this.formData = res.data
        this.getPicTotalArea()
        // this.proConfigTableData = res.data.configDetailDtos
      }
      this.loading = false
    }).catch(() => {
      this.loading = false
    })
  },
  methods: {
    // 获取数据字典
    async getDictByTypeCode(data) {
      const obj = await getDictByPatchType(data)
        .then(res => {
          return res
        })
      return obj
    },
    // 取消
    handleBack() {
      this.clearForm()
      this.$store.dispatch('views/goBack')
    },
    clearForm(done) {
      this.formData = {}
      this.$refs.rulesForm && this.$refs.rulesForm.clearValidate()
      done && done()
    },
    // 查看图纸详情
    toPicDetail(row) {
      this.rowId = row
      this.showPicDetail = true
    },
    // 计算关联图纸面积
    getPicTotalArea() {
      let area = 0
      this.formData.designPictureDtos.forEach(item => {
        area = area + (isNaN(Number(item.picTotalArea)) ? 0 : Number(item.picTotalArea))
      })
      this.formData.picTotalArea = area
    },
    // 返回配置详情
    backDetail() {
      this.showPicDetail = false
    }
  }
}
</script>
<style lang="scss" scoped>
.but20{ margin-bottom: 20px;}
.el-breadcrumb__inner .btn-green{
    color: #3DC094;
}
/deep/.el-breadcrumb__inner{
  color: $qup-color-primary;
}
</style>
